<template>
  <Editor
      :value="props.value"
      :mode="props.mode"
      :upload-images="handleUploadFile"
      :plugins="plugins"
      :locale="locales['zh-CN']"
      @change="props.handleChange"
      class="custom-md-editor"
  />
</template>

<script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import gemoji from '@bytemd/plugin-gemoji'
import frontMatter from '@bytemd/plugin-frontmatter' // 解析前题
import mediumZoom from '@bytemd/plugin-medium-zoom' // 缩放图片
import highlight from "@bytemd/plugin-highlight";
import {Editor} from "@bytemd/vue-next";
import {defineProps, withDefaults} from "vue";
import "bytemd/dist/index.css";
import 'github-markdown-css/github-markdown.css' // 掘金同款样式

/**
 * 定义中文本地化配置
 */
const locales = {
  "zh-CN": {
    "bold": "粗体",
    "boldText": "粗体文本",
    "cheatsheet": "Markdown 语法",
    "closeHelp": "关闭帮助",
    "closeToc": "关闭目录",
    "code": "代码",
    "codeBlock": "代码块",
    "codeLang": "编程语言",
    "codeText": "代码",
    "exitFullscreen": "退出全屏",
    "exitPreviewOnly": "恢复默认",
    "exitWriteOnly": "恢复默认",
    "fullscreen": "全屏",
    "h1": "一级标题",
    "h2": "二级标题",
    "h3": "三级标题",
    "h4": "四级标题",
    "h5": "五级标题",
    "h6": "六级标题",
    "headingText": "标题",
    "help": "帮助",
    "hr": "分割线",
    "image": "图片",
    "imageAlt": "alt",
    "imageTitle": "图片描述",
    "italic": "斜体",
    "italicText": "斜体文本",
    "limited": "已达最大字符数限制",
    "lines": "行数",
    "link": "链接",
    "linkText": "链接描述",
    "ol": "有序列表",
    "olItem": "项目",
    "preview": "预览",
    "previewOnly": "仅预览区",
    "quote": "引用",
    "quotedText": "引用文本",
    "shortcuts": "快捷键",
    "source": "源代码",
    "sync": "同步滚动",
    "toc": "目录",
    "top": "回到顶部",
    "ul": "无序列表",
    "ulItem": "项目",
    "words": "字数",
    "write": "编辑",
    "writeOnly": "仅编辑区"
  }
}

/**
 * GFM 插件的本地化配置
 */
const gfmLocale = {
  "zh-CN": {
    "strike": "删除线",
    "strikeText": "文本",
    "table": "表格",
    "tableHeading": "标题",
    "task": "任务列表",
    "taskText": "待办事项"
  }
}

const plugins = [
  gfm({
    locale: gfmLocale["zh-CN"]
  }),
  highlight(),
  gemoji(),
  frontMatter(),
  mediumZoom(),
];

/**
 * 定义组件性类型
 */
interface Props {
  value: string;
  mode?: string;
  handleChange: (v: string) => void;
}

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  mode: () => "split",
  handleChange: (v: string) => {
    console.log(v);
  },
});

const handleUploadFile = (files) => {
  let imgUrl = ''
  let fromData = new FormData()
  fromData.append('file', files[0])
  // const res = await uploadImg(fromData)
  // console.log(res)
  return [
    {
      title: 'xxx',
      url: imgUrl,
    },
  ]
}
</script>

<style>

/* 隐藏帮助按钮 */
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {
  display: none;
}

/* 自定义编辑器样式 */
.custom-md-editor {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.custom-md-editor:hover {
  border-color: var(--el-border-color-darker);
}

.markdown-body blockquote {
  border-left: 2px solid #EBEBEB !important;
}

.markdown-body blockquote p {
  font-family: Menlo, sans-serif !important;
  margin-bottom: 0;
}

.markdown-body blockquote p strong {
  color: #262626;
  font-weight: 700;
}

/* 工具栏样式 */
.bytemd-toolbar {
  background-color: var(--el-bg-color) !important;
  border-bottom: 1px solid var(--el-border-color-lighter) !important;
  padding: 8px !important;
  height: 48px !important; /* 固定工具栏高度 */
}

.bytemd-toolbar-icon {
  margin: 0;
  padding: 6px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

/* 编辑区域样式 */
.bytemd-editor {
  background-color: var(--el-bg-color) !important;
  min-height: 200px;
}

/* 预览区域样式 */
.bytemd-preview {
  background-color: var(--el-bg-color) !important;
  min-height: 200px;
}

/* 分割线样式 */
.bytemd-split {
  border-left: 1px solid var(--el-border-color-lighter) !important;
}

/* 状态栏样式 */
.bytemd-status {
  background-color: var(--el-bg-color) !important;
  border-top: none !important;
  color: var(--el-text-color-secondary) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  position: relative !important;
}

/* 添加一个更细的分隔线 */
.bytemd-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--el-border-color-lighter);
  opacity: 0.5;
}

/* 工具栏按钮悬停效果 */
.bytemd-toolbar-icon:hover {
  background-color: var(--el-fill-color-light) !important;
  color: var(--el-color-primary) !important;
}

/* 编辑器文本区域样式 */
.CodeMirror {
  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace !important;
  font-size: 14px !important;
  line-height: 1.8 !important; /* 增加行高 */
  color: var(--el-text-color-primary) !important;
}

/* 预览区域的内容样式 */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: var(--el-text-color-primary) !important;
}

/* 调整编辑器高度 */
.bytemd {
  flex: 1;
  height: 600px !important;
  display: flex;
  flex-direction: column;
  border-bottom: none !important;
}

/* 全屏模式下的样式调整 */
:deep(.bytemd-fullscreen) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: var(--el-bg-color) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* 确保全屏模式下编辑器容器不受父元素影响 */
:deep(.bytemd-fullscreen) .custom-md-editor {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10000 !important;
}

/* 调整全屏模式下的内部布局 */
:deep(.bytemd-fullscreen) .bytemd {
  height: 100vh !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

:deep(.bytemd-fullscreen) .bytemd-body {
  height: calc(100vh - 48px - 25px) !important;
}

:deep(.bytemd-fullscreen) .CodeMirror,
:deep(.bytemd-fullscreen) .bytemd-preview {
  height: 100% !important;
  max-height: none !important;
}

/* 编辑器内容区域的动条样式 */
.CodeMirror-vscrollbar::-webkit-scrollbar,
.bytemd-preview::-webkit-scrollbar {
  width: 6px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.bytemd-preview::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color-lighter);
  border-radius: 3px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-track,
.bytemd-preview::-webkit-scrollbar-track {
  background-color: var(--el-fill-color-blank);
}

/* 预览区域的链接样式 */
.markdown-body a {
  color: var(--el-color-primary) !important;
  text-decoration: none !important;
}

.markdown-body a:hover {
  text-decoration: underline !important;
}

/* 预览区域的代码块样式 */
.markdown-body pre {
  background-color: var(--el-fill-color-light) !important;
  border-radius: 4px !important;
  padding: 16px !important;
}

/* 预览区域的表格样式 */
.markdown-body table {
  border-collapse: collapse !important;
  margin: 16px 0 !important;
}

.markdown-body table th,
.markdown-body table td {
  border: 1px solid var(--el-border-color) !important;
  padding: 8px 12px !important;
}

.markdown-body table th {
  background-color: var(--el-fill-color-light) !important;
}

/* 自定义提示框样式 */
.tippy-box[data-theme~='bytemd'] {
  background-color: var(--el-bg-color-overlay) !important;
  color: var(--el-text-color-primary) !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

.tippy-box[data-theme~='bytemd'] .tippy-arrow {
  color: var(--el-bg-color-overlay) !important;
}
</style>
